<template>
  <div class="edit_content nomt" style="border-bottom:0">
    <el-form size="medium" label-width="100px" ref="shForm" class="edit_form" style="width:100%">
      <el-form-item label="商品类型">
        <span>{{obj.type==0?'实体商品':'虚拟商品'}}</span>
      </el-form-item>
      <el-divider></el-divider>
      <div class="disef">
        <div>
          <el-form-item label="商品名称：" prop="name">
            <span>{{obj.name}}</span>
          </el-form-item>
          <el-form-item label="商品副标题：" prop="subtitle">
            <span>{{obj.subtitle}}</span>
          </el-form-item>
          <el-form-item label="商品主图：" prop="master">
            <div class="img_box">
              <vimage :src="obj.master" ></vimage>
            </div>
          </el-form-item>

          <el-form-item label="商品轮播图：" prop="slideshow">
            <div class="img_box">
              <vimage v-for="(item,i) in obj.slideshow" :src="item.url" ></vimage>
            </div>
            <!-- <UploadMulti :obj="obj"></UploadMulti> -->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="所属分类：" prop="classify_id">
            <span>{{obj.classify_value}}</span>
            <!-- <el-cascader v-model="classify_id" ref="cateCal" :options="cateList" :props="{multiple: true, checkStrictly: true}" clearable></el-cascader> -->
          </el-form-item>

          <!-- <el-form-item label="营销标签">
                  <el-checkbox>推荐</el-checkbox>
                  <el-checkbox>新品</el-checkbox>
                  <el-checkbox>热卖</el-checkbox>
          </el-form-item>-->

          <!-- <el-form-item label="商品标签">
                  11
          </el-form-item>-->

          <el-form-item label="商品排序：">
            <span>{{obj.sort}}</span>
          </el-form-item>
          <el-form-item label="启用虚拟销量：">
            <span>{{obj.is_virtual?'启用':'关闭'}}</span>
          </el-form-item>
          <el-form-item label="虚拟销量：" v-if="obj.is_virtual == 1">
            <span>{{obj.virtual_sell}}</span>
          </el-form-item>
          <el-form-item label="商品限购：">
            <span>{{obj.is_limitation?'是':'否'}}</span>
          </el-form-item>
          <el-form-item label="限购数量：" v-if="obj.is_limitation == 1">
            <span>{{obj.limitation}}</span>
          </el-form-item>
          <el-form-item label="库存类型：">
            <el-radio-group disabled v-model="obj.inventory_type">
              <el-radio :label="1">下单前减库存</el-radio>
              <el-radio :label="2">永不减库存</el-radio>
              <el-radio :label="3">付款减库存</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商品标签：">
            <el-tag
              :key="tag"
              v-for="tag in obj.label"
              :disable-transitions="false"
              @close="handleClose(tag)"
            >{{ tag }}</el-tag>
            <!--   <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
            ></el-input>-->
            <!-- <el-button v-else class="button-new-tag" size="small" @click="showInput">添加</el-button> -->
          </el-form-item>
        </div>
      </div>

      <el-divider></el-divider>
      <el-form-item label="商品分享图：">
        <div class="img_box">
          <vimage :src="obj.share" ></vimage>
        </div>
      </el-form-item>
      <el-divider></el-divider>
      <div class="disef">
        <div>
          <el-form-item label="默认售价：">
            <span>{{obj.sell_price}}</span>
          </el-form-item>
          <el-form-item label="默认划线价：">
            <span>{{obj.original_price}}</span>
          </el-form-item>
          <el-form-item label="默认库存：">
            <span>{{obj.total}}</span>
          </el-form-item>
          
        </div>
        <div>
          <el-form-item label="默认重量：">
            <span>{{obj.weight}}</span>
          </el-form-item>
          <el-form-item label="提取方式：">
            <el-radio-group disabled v-model="obj.deliver">
              <el-radio :label="1">快递</el-radio>
              <el-radio :label="2">自提</el-radio>
              <el-radio :label="3">两者都支持</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="多规格：">
            <el-radio-group disabled v-model="obj.has_sku">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <div class="gray_area sku_setting" v-if="obj.has_sku == 1">
        <div class="sku_attr">
          <div class="attr_bk" v-for="(item, i) in obj.sku_value" :key="i">
            <div class="attr_name">
              <el-input
                disabled
                v-model="item.name"
                placeholder="如颜色、尺码、大小"
                style="width:180px"
                @keyup.enter.native="formatSkuData"
                @blur="formatSkuData"
              ></el-input>
            </div>
            <div class="attr_list">
              <div class="line">
                <span class="line_bk"></span>
              </div>
              <ul>
                <li v-for="(sitem, l) in item.attrValue" :key="l">
                  <el-input
                    disabled
                    v-model="sitem.value"
                    placeholder="子规格,如L、M"
                    style="width:180px"
                    @keyup.enter.native="formatSkuData"
                    @blur="formatSkuData"
                  ></el-input>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="sku_set">
          <el-table :data="tabledata" :span-method="arraySpanMethod" :key="rk">
            <template v-for="(item, i) in keylist">
              <el-table-column v-if="item == '图片'" :prop="'k' + i" :key="i" :label="item">
                <template slot-scope="scope">
                  <div style="width:40px;height:40px;">
                    <Upload :tempUrl="scope.row.pic" @input="getSkuImage($event, i, scope.$index)"></Upload>
                  </div>
                </template>
              </el-table-column>
              <el-table-column v-if="item != '图片'" :prop="'k' + i" :key="i" :label="item"></el-table-column>
            </template>
            <el-table-column label="销售价(元)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sell_price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="划线价(元)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.original_price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="重量(g)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.weight"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="库存(件)" v-if="!obj.is_store_inventory">
              <template slot-scope="scope">
                <div style="display:flex;align-items: center;">
                  <el-input v-model="scope.row.total"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" v-if="obj.is_store_inventory">
              <template slot-scope="scope">
                <el-button @click="buildStoreNum(scope)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-divider></el-divider>
      <el-form-item label="运费设置">
        {{obj | getft}}
        <!--      <el-radio-group disabled v-model="obj.ft_type">
          <el-radio :label="0">包邮</el-radio>
          <el-radio :label="1">选择模板</el-radio>
          <el-radio :label="2">统一运费</el-radio>
        </el-radio-group>
        <div class="gray_area" v-if="obj.ft_type == 1">
          <el-select v-model="obj.ft_id" placeholder="请选择运费模板">
            <el-option v-for="item in freightList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-button type="text" style="margin-left:10px;" @click="refreshFreight">刷新</el-button>
          <router-link tag="a" target="_blank" to="/freight/list" style="margin-left:10px"><el-button type="text">添加模板</el-button></router-link>
        </div>
        <div class="gray_area" v-if="obj.ft_type == 2">
          <el-input v-model="obj.ft_price" placeholder="请输入统一运费" style="width:300px">
            <template slot="append">
              元
            </template>
          </el-input>
          <div style="color:#909399;font-size:12px;">如果开启了同城配送,同城运费根据统一邮费进行计算</div>
        </div>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getPro, getAllFreight } from "@/api/shop/product";

import { objCopy, doCombination } from "@/utils/index";
export default {
  data() {
    return {
      freightList: [],
      obj: {
        name: "", //商品名
        type: 0, //商品类型:0:实体商品,1:虚拟商品
        subtitle: "", //副标题
        master: "", //主图
        cover: false, //是否讲主图添加进轮播图
        slideshow: [], //轮播图
        share: "", //分享图
        classify_id: "", //分类id:1->2->3,1->4,string
        classify_value: "", //分类值:1级->2级->3级,1级->2级1,string
        weight: 0, //重量
        deliver: 3, //提取方式:1:快递,2:自提,3:两者都支持(默认)
        ft_type: 0, //运费:0:包邮,1:模板,2:统一价格
        ft_id: "", //配送模板id,ft_type=1的时候需要填写
        ft_price: 0, //统一配送价格,ft_type=2的时候需要填写
        total: 0, //总量，库存?
        original_price: 0, //原价
        sell_price: 0, //售价
        is_original_price: 0, //是否开启原价:0:不开启,1:开启
        content: "", //商品详情
        sort: 0, //排序
        has_parameter: 0, //是否拥有参数,0:不拥有,1:拥有
        parameter: [], //参数对象
        is_virtual: 0, //是否开启虚拟销量:0:不开启,1:开启
        virtual_sell: 0, //虚拟销量
        is_limitation: 0, //是否开启限购
        limitation: 0, //限购数量
        inventory_type: 1, //库存类型:1:下单前减库存,2:永不减库存,3:付款减库存
        label: ["正品保证", "假一赔十", "七天无理由退货"], //标签
        is_distribution: 0, //是否参与分销:0:不参与,1:参与
        is_base_distribution: 0, //启用全局分销配置:0:是,1:不是
        distribution: [
          {
            level: 1,
            type: 0,
            figure: 0
          },
          {
            level: 2,
            type: 0,
            figure: 0
          },
          {
            level: 3,
            type: 0,
            figure: 0
          }
        ], //分销数据
        integral: 0,
        integral_maximum: 0,
        integral_deduction: 0,
        my_integral_deduction: 0,
        has_sku: 0, //是否有sku:0:没有,1:有
        sku_value: [
          {
            name: "颜色",
            attrValue: [
              {
                value: "红色"
              },
              {
                value: "黄色"
              },
              {
                value: "蓝色"
              }
            ],
            has_pic: 0
          },
          {
            name: "尺码",
            attrValue: [
              {
                value: "L"
              },
              {
                value: "M"
              },
              {
                value: "S"
              }
            ],
            has_pic: 0
          }
        ], //sku对象{“1&颜色”:[“1&红色”,”2&白色”],”2&尺码”:[“3&L”,”4&M”]},当has_sku为1时必选
        sku: [
          {
            pvs: "颜色:白色,尺码:L",
            weight: 0,
            inventory: {
              original_price: 0,
              sell_price: 0,
              total: 0
            }, //有sku不开启门店库存下的库存对象(is_store_inventory为0时必选)
            store_sku_inventory: [
              {
                store_id: "",
                original_price: 0,
                sell_price: 0,
                total: 0
              }
            ] //有sku的门店库存对象数组(is_store_inventory为1时必选)
          }
        ], //sku对象数组(当has_sku为1时必选)
        is_store_inventory: 0, //是否开启门店库存,0:不开启，1:开启
        store_inventory: [
          {
            store_id: "",
            total: 0
          }
        ] //没有sku的门店库存对象数组(当has_sku为0,is_store_inventory为1时必选)
      },
      tabledata: {}
    };
  },
  watch: {
    "obj.is_virtual": function() {
      if (!Boolean(this.obj.is_virtual)) {
        this.obj.virtual_sell = 0;
      }
    },
    "obj.has_sku": function() {
      if (Boolean(this.obj.has_sku)) {
        this.formatSkuData();
      }
    },
    "obj.is_store_inventory": function() {
      //if(Boolean(this.obj.is_store_inventory) && Boolean(this.obj.has_sku)){}
    }
  },
  filters: {
    getft(obj) {
      if (obj.ft_type == 0) {
        return "包邮";
      } else if (obj.ft_type == 1) {
        let data = this.freightList.filter(_ => {
          return (_.id = obj.ft_id);
        });
        let a = data[0];
        return a.name;
      } else if (obj.ft_type == 2) {
        return "统一运费：" + obj.ft_price + "元";
      }
    }
  },
  created() {
    this.getAllFreight();
  },
  methods: {
    //获取所有运费模板
    getAllFreight() {
      this.isLoading = true;
      getAllFreight().then(res => {
        // this.isLoading = false;
        //处理数据
        this.freightList = res.msg;
      });
    },
    //初始化SKU数据
    formatSkuData() {
      this.rk++;
      let sl = this.obj.sku_value,
        list = [],
        keylist = [];

      //查询出启用pic的sku_item下标
      let index = sl.findIndex(e => e.has_pic == true);

      sl.forEach((e, i) => {
        keylist.push(e.name);
        //预处理attrValue数据,添加sku的key值以及父ID
        e.attrValue.forEach(ee => {
          ee.name = e.name;
          ee.pid = e.id;
        });

        list.push(e.attrValue);
        if (i == index) {
          keylist.push("图片");
          list.push([
            {
              value: ""
            }
          ]);
        }
      });

      this.keylist = keylist;

      let alist = doCombination(list);
      //console.log(alist)

      let t = [];
      alist.forEach((e, i) => {
        let o = {};
        // for(let i=0,l=this.obj.sku_value.length;i<l;i++){
        //   let d = 'k' + i;
        //   o[d] = e[i].value ? e[i].value : '#';
        // };
        for (let i = 0, l = this.keylist.length; i < l; i++) {
          let d = "k" + i;
          if (this.keylist[i] == "图片") {
            o[d] = e[i].value ? e[i].value : "";
          } else {
            o[d] = e[i].value ? e[i].value : "#";
          }
        }

        //添加参数
        // if (this.$route.query.id) {
        //编辑状态
        if (this.obj.has_sku) {
          if (this.obj.is_store_inventory) {
            //开启门店库存（循环数据全部取0下表,可能会有错,库存暂时已搁置,此问题先不研究）
            //o.cost_price = this.obj.sku[i] != undefined ? this.obj.sku[i].storeSkuInventory[0].cost_price : 0;
            o.weight =
              this.obj.sku[i] != undefined ? this.obj.sku[i].weight : 0;
            o.original_price =
              this.obj.sku[i] != undefined
                ? this.obj.sku[i].storeSkuInventory[0].original_price
                : 0;
            o.sell_price =
              this.obj.sku[i] != undefined
                ? this.obj.sku[i].storeSkuInventory[0].sell_price
                : 0;
            o.total =
              this.obj.sku[i] != undefined
                ? this.obj.sku[i].storeSkuInventory[0].total
                : 0;
            o.store_inventory =
              this.obj.sku[i] != undefined
                ? this.obj.sku[i].storeSkuInventory
                : [];
            o.pic = this.obj.sku[i] != undefined ? this.obj.sku[i].pic : "";
            //实时库存
            o.tsum =
              this.obj.sku[i] != undefined
                ? this.obj.sku[i].total - this.obj.sku[i].sell
                : 0;
          } else {
            o.weight = 0;
            o.original_price = 0;
            o.sell_price = 0;
            o.total = 0;
            o.store_inventory = [];
            o.pic = "";
            //o.cost_price = this.obj.sku[i].inventory.sell_price;
            //定位数据
            let tls = [],
              s = "";
            tls = e.filter(_ => {
              return _.value != "";
            });
            //拼装标志
            tls.forEach(e => {
              s += e.pid + ":" + e.id + ",";
            });
            s = s.substring(0, s.length - 1);

            //定位
            let target = this.obj.sku.filter(_ => {
              return _.pvs == s;
            });

            if (target.length > 0) {
              o.weight = target[0].weight;
              o.original_price = target[0].inventory.original_price;
              o.sell_price = target[0].inventory.sell_price;
              //o.total = target[0].inventory.total;
              o.total = target[0].inventory.total - target[0].inventory.sell;
              o.sell = target[0].inventory.sell;
              o.store_inventory = [];
              o.pic = target[0].pic;

              o.pid = target[0].id;
              o.id = target[0].inventory.id;
              o.sku_id = target[0].inventory.sku_id;

              //实时库存
              o.tsum = target[0].inventory.total - target[0].inventory.sell;
            }
          }
        }
        // } else {
        //   //o.cost_price = 0;
        //   o.weight = 0;
        //   o.original_price = 0;
        //   o.sell_price = 0;
        //   o.total = 0;
        //   o.store_inventory = [];
        //   o.pic = '';
        // }

        t.push(o);
      });

      //console.log(t)
      this.tabledata = t;
    },
    //表格合并功能计算函数
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      switch (this.obj.sku_value.findIndex(e => e.has_pic == true)) {
        case 0:
          if (columnIndex === 0 || columnIndex === 1) {
            let d = this.obj.sku_value[1]
              ? this.obj.sku_value[1].attrValue.length
              : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 2) {
            let d = this.obj.sku_value[2]
              ? this.obj.sku_value[2].attrValue.length
              : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
        case 1:
          if (columnIndex === 0) {
            let d = this.obj.sku_value[1]
              ? this.obj.sku_value[1].attrValue.length
              : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 1 || columnIndex === 2) {
            let d = this.obj.sku_value[2]
              ? this.obj.sku_value[2].attrValue.length
              : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
        case 2:
        default:
          if (columnIndex === 0) {
            let d = this.obj.sku_value[1]
              ? this.obj.sku_value[1].attrValue.length
              : 1;

            if (this.obj.sku_value[2] && this.obj.sku_value[2].attrValue) {
              d = d * this.obj.sku_value[2].attrValue.length;
            }

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else if (columnIndex === 1) {
            let d = this.obj.sku_value[2]
              ? this.obj.sku_value[2].attrValue.length
              : 1;

            if (rowIndex % d === 0) {
              return {
                rowspan: d,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          break;
      }
    },
    getData(id) {
      getPro(id).then(res => {
        let o = res.msg;
        let max = Number(o.integral_maximum);
        if (o.integral_deduction == 1) {
          if (max == 0) {
            o.my_integral_deduction = 1;
          } else {
            o.my_integral_deduction = 2;
          }
        }
        o.total = o.total - o.sell;
        // objCopy(this.obj, o);

        this.obj = o;
        //转换类别数据
        let c = [];
        c = o.classify_id.split(",");
        c.forEach((e, i) => {
          c[i] = c[i].split("->");
        });
        this.classify_id = c;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.img_box {
  // width: 100px;
  // height: 100px;
  img {
    width: 100px;
    height: 100px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
//穿透样式,解决样式无法对齐的bug
::v-deep .el-checkbox .el-checkbox__label {
  vertical-align: middle;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: #fff !important;
  color: #000 !important;
}
//主体样式
.list_con {
  display: flex;
  flex-direction: column;
  // height: 100%;
  padding-bottom: 0;
  height: calc(100vh - 70px);

  .lcc {
    flex: 1;
    overflow-y: auto;
    height: 0;
    position: relative;
  }

  .edit_footer {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    flex: 0;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid #dcdfe6;
    text-align: center;
  }
}

//公共灰色区域样式
.gray_area {
  background: #f4f6f8;
  margin-top: 10px;
  padding: 20px;

  &.store_inventory {
    width: 500px;
  }
}

//设置商店库存样式
.store_inventory {
  width: 600px;

  ul {
    li {
      display: flex;
      border-top: 1px solid #dcdfe6;
      padding: 20px 0;

      &:first-child {
        border-top: 0;
        padding-top: 0;
      }

      &.addMore {
        padding-top: 10px;
        padding-bottom: 0;
        justify-content: center;
        color: #1890ff;
        cursor: pointer;
      }
    }
  }
}

//设置SKU样式
.sku_attr {
  .attr_bk {
    border-bottom: 1px solid #dcdfe6;
    padding-top: 20px;
    position: relative;

    .icon-abl-close-bk {
      position: absolute;
      z-index: 1;
      font-size: 20px;
      right: 0;
      top: 20px;
      cursor: pointer;
      color: #909399;
      display: none;
    }

    &:first-child {
      padding-top: 0;
    }

    &.addBk {
      padding-bottom: 20px;
      color: #2e68ea;
      cursor: pointer;
      text-align: center;
    }

    &:hover {
      .icon-abl-close-bk {
        display: block;
      }
    }

    .attr_name {
      //no css
    }

    .attr_list {
      display: flex;
      padding: 0 0 20px 50px;
      position: relative;

      .line {
        position: absolute;
        top: 18px;
        left: 20px;
        width: 20px;
        height: 20px;
        border: 1px solid #b8b9bd;
        border-top: none;
        border-right: none;
      }

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          position: relative;
          margin-right: 20px;
          margin-top: 20px;

          .icon-abl-close {
            position: absolute;
            z-index: 1;
            font-size: 20px;
            right: -10px;
            top: -10px;
            cursor: pointer;
            color: #909399;
            display: none;

            &:hover {
              color: #606266;
            }
          }

          &.addItem {
            color: #2e68ea;
            cursor: pointer;
          }

          &:hover {
            .icon-abl-close {
              display: block;
            }
          }
        }
      }
    }
  }
}

.sku_num_all {
  background: #fff;
  display: flex;
  margin-top: 20px;
  padding: 20px 0;

  .l_title {
    width: 100px;
    margin-right: 20px;
    text-align: right;
  }
}

.sku_set {
  margin-top: 20px;
  background: #fff;

  // .sku_header{
  //   border-bottom: 1px solid #DCDFE6;

  //   th{
  //     padding: 5px 0;
  //   }
  // }

  // .sku_body{
  //   tr{
  //     td{
  //       padding: 10px;
  //       text-align: center;
  //       border-bottom: 1px solid #DCDFE6;
  //     }

  //   }
  // }
}

//商品参数样式
.proPrams {
  width: 800px;
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  dl {
    width: 100%;
    border: 1px solid #dcdfe6;

    dt {
      display: flex;
      border-bottom: 1px solid #dcdfe6;
      height: 40px;
      line-height: 40px;
      background: #f4f6f8;
      font-weight: 700;

      .dks {
        &.drag {
          width: 30px;
          text-align: center;
          font-size: 16px;
        }

        &.ins {
          flex: 1;
          padding-right: 15px;
        }

        &.cbs {
          width: 50px;
        }
      }
    }

    dd {
      display: flex;
      padding: 10px 0;
      margin: 0;
      border-bottom: 1px solid #dcdfe6;

      &.ap {
        border-bottom: 0;
        text-align: center;
      }

      // &:last-child{
      //   border-bottom: 0;
      // }

      .dks {
        &.drag {
          cursor: pointer;
          width: 30px;
          text-align: center;
          font-size: 16px;
        }

        &.ins {
          flex: 1;
          padding-right: 15px;
        }

        &.cbs {
          width: 50px;
        }
      }
    }
  }
}

//灰色框
.fks {
  background: #f4f6f8;
  //width: 500px;
  padding: 20px;
  color: #606266;
}
</style>
<style lang="scss">
.detial_div {
  display: flex;
  .title {
    text-align: center;
    display: block;
    margin: 10px 0;
  }
  .content_div {
    border: 1px solid #f5f2f0;
    margin-right: 25px;
    width: 375px;
    height: 600px;
    overflow-y: scroll;
    img {
      width: 100%;
       display:block
    }
  }
  .tinymce-container {
    width: calc(100% - 400px) !important;
  }
}
.disef {
  display: flex;
  justify-content: space-between;
  padding-right: 100px;
}
</style>
